<template>
    <ul class="scroll">
        <li class="roll" v-if="show">
            {{ props.text }}
        </li>
        <li class="roll" v-if="show">
            {{ text }}
        </li>
        <li v-else>
            {{ text }}
        </li>
    </ul>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
const show = ref(false)
const props = defineProps({
    text: {
        type: String,
        default: '这是一个很长的数据，需要无缝滚动展示?'
    }
})
const whetherToScroll = () => {
    const father: any = document.querySelector('.scroll')
    const son: any = document.querySelector('li')
    console.log(father, son);
    console.log(father.offsetWidth, son.offsetWidth);
    if (father.offsetWidth < son.offsetWidth) {
        show.value = true
    } else {
        show.value = false
    }
}
onMounted(() => {
    whetherToScroll()
})
</script>

<style scoped lang="scss">
.scroll {
    width: 200px;
    list-style-type: none;
    padding: 5px 0;
    box-shadow: 0 0 10px rgba(128, 128, 128, 0.603);
    display: flex;
    overflow: hidden;
    flex-wrap: nowrap;

    li {
        white-space: nowrap;
    }

    .roll {
        &:nth-child(1) {
            animation: animation1 6s infinite linear;
        }

        &:nth-child(2) {
            animation: animation2 6s infinite linear;
        }
    }

    @keyframes animation1 {
        from {
            transform: translate(0%);
        }

        to {
            transform: translate(-100%);
        }
    }

    @keyframes animation2 {
        from {
            transform: translate(0%);
        }

        to {
            transform: translate(-100%);
        }
    }
}
</style>